<template>
  <div class="outer">

    <Tab tittle="美食" >
      <template v-slot:count>
        <img width="200" src="./bk.png" alt="" />
      </template>   

      <template #foot>
        <h3>111</h3>
      </template>

    </Tab>

    <Tab tittle="电影">
      <template #count>
        <ul>
        <li>星际穿越</li>
        <li>阿甘正传</li>
        <li>绿皮车</li>
      </ul>
      </template>

      <template #foot>
        <h3>222</h3>
      </template>
    </Tab>

    <Tab tittle="音乐">
      <template v-slot:count>
        <img width="180" src="./kf.png" alt="" />
      </template>
    
      <template #foot>
        <h3>333</h3>
      </template>
    </Tab>


  </div>
</template>

<script>
import Tab from "./components/Tab.vue";
export default {
  name: "App",
  components: { Tab },
};
</script>

<style>
.outer {
  width: 800px;
  display: flex;
  justify-content: space-between;
}
</style>